<template>
	<page-meta :root-font-size="'13px'"></page-meta>
	<view class="py-20">
		<image src='@/static/embed/loginBg.png' class="fixed w-full h-full top-0 left-0 right-0 -z-10"></image>
		<u-navbar bgColor="transparent">
			<view slot="left">
				<!-- 	<i class="ri-arrow-left-s-line text-4xl text-white"
					@click="$u.route({ type: 'navigateBack', delta: 1 })"></i> -->
			</view>
		</u-navbar>
		<u-popup :show="showAction" @close="showAction = false" :closeable="true" :round="30">
			<view style="padding: 50rpx 30rpx;">
				<view style="font-size: 32rpx;">请先同意以下协议条款：</view>
				<view style="margin-top: 50rpx;margin-bottom: 30rpx;">
					<text style="color:#fb7185 ;" @click="$u.route('/pages/public/page', { id: 1 })">《用户协议》</text>和<text
						@click="$u.route('/pages/public/page', { id: 2 })" style="color:#fb7185 ;">《隐私政策》</text>
				</view>
				<view @click="yes"
					style="margin: 0 auto;width: 400rpx;color: #fff;text-align: center;height: 80rpx;line-height: 80rpx;background:#fb7185 ;border-radius: 10rpx;">
					同意并继续</view>
			</view>
		</u-popup>
		<view class="logo">
			<image src="@/static/logo-circle.png" class="logoPic"></image>
		</view>
		<view class="px-10 py-20">
			<!-- <view class="text-2xl text-white">注册登录</view> -->
			<view class=" rounded-full mb-10" style="margin-top: 30rpx;padding-top: 20rpx;">
				<u-input v-model="form.mobile" :focus="true" placeholder="请输入手机号" type="number" maxlength="11"
					@input="handleInput('mobile')" style="border-bottom: 1px solid #ECECEC;" fontSize="32">
					<!-- <text slot="prefix" class="text-2xl pr-2 mr-4 border-right">+86</text> -->
				</u-input>
			</view>
			<view class=" rounded-full mb-10" style="margin-top: 30rpx;">
				<u-input placeholder="请输入验证码" type="number" maxlength="6" v-model="form.code" fontSize="32"
					style="border-bottom: 1px solid #ECECEC;padding-top: 20rpx;">
					<button slot="suffix" class="sendCodeBtn" :disabled="sendBtnDisabled"
						@click="getSmsCode()">{{ codeText }}</button>
				</u-input>
			</view>
			<view class="grid mt-8 text-center" @click="$noMultipleClicks(commitWork)">
				<view
					class="rounded-full p-6 text-base leading-none text-white bg-gradient-to-r from-rose-400 to-rose-500"
					@click="onLogin()">登录</view>
			</view>
			<view class="flex " style="position: absolute; bottom: 100rpx; text-align: center;">
				<text class="text-base leading-none text-white opacity-50"
					@click="$u.route('/pages/public/center')">登录遇到问题?</text>
			</view>
			<view class="flex flex-row-right mt-8" style="margin-top: 40rpx;">
				<u-checkbox-group>
					<u-checkbox @change="handleAgree" :checked="protocol" size="28" shape="circle"
						inactiveColor="#808080" activeColor="#ff6897"></u-checkbox>
				</u-checkbox-group>
				<view class="text-base leading-none" style="color: #808080;">
					<text>阅读并同意</text>
					<text class="ml-2 mr-4" style="color:#fb7185 ;"
						@click="$u.route('/pages/public/page', { id: 1 })">《用户协议》</text>
					<text>和</text>
					<text class="ml-2 mr-4" style="color:#fb7185 ;"
						@click="$u.route('/pages/public/page', { id: 2 })">《隐私政策》</text>
				</view>
			</view>
		</view>

	</view>

</template>
<!-- feifeifei -->
<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		name: 'login',
		data() {
			return {
				form: {
					mobile: '',
					code: '',
				},
				codeText: '获取验证码',
				protocol: false,
				isMobileEnd: false,
				disabledCode: false,
				policy: '', //协议内容
				showPopup: false, //控制协议弹窗
				scrollHeight: uni.getSystemInfoSync().windowHeight - 130, //协议内容滚动高度
				noClick: true,
				sendBtnDisabled: false,
				// --------
				isClick: true,
				showAction: false,
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			})
		},
		mounted() {
			let that = this
			that.$api('user.info').then(res => {
				if (res.code === 1) {
					console.log('mount', res);
				} else {
					that.$u.toast(res.msg)
				}
			})
		},
		methods: {
			...mapActions(['getUserInfo']),
			yes() {
				this.showAction = false;
				this.protocol = true;
				this.getSmsCode()
			},
			// 登录
			commitWork() {
				let that = this
				//开始你的表演
			},

			handleInput(key) {
				let that = this
				that.isMobileEnd = that.$u.test.mobile(that.form.mobile)
			},
			handleAgree(e) {
				let that = this;
				that.protocol = e;
			},
			getSmsCode() {
				let that = this
				if (!that.protocol) {
					that.showAction = true;
					return false
				}
				if (!that.isMobileEnd || that.disabledCode) {
					that.$u.toast('请正确填写')
					return false
				}
				let data = {
					mobile: Number(that.form.mobile),
					event: 'register'
				}

				that.$api('sms.send_sms', data).then(res => {
					if (res.code === 1) {
						if (that.disabledCode) return
						that.disabledCode = true;
						this.sendBtnDisabled = true;
						let n = 60
						let run = setInterval(() => {
							n -= 1
							that.codeText = n + 's'
							if (n < 0) {
								clearInterval(run)
								that.disabledCode = false
								that.codeText = '重新获取'
								this.sendBtnDisabled = false;
							}
						}, 1000)
						that.$u.toast('验证码已发送，请注意查收短信')
					} else {
						that.$u.toast(res.msg)
					}
				})
			},

			onLogin() {
				let that = this;
				if (!that.protocol) {
					that.$u.toast('请同意用户协议')
					return false
				}
				console.log(that.isClick)
				// if (!that.isMobileEnd || that.disabledCode ) {
				// 	that.$u.toast('请正确填写信息')
				// 	return false
				// }
				// #ifdef APP-PLUS
				uni.getPushClientId({
					success(res) {
						uni.getSystemInfo({
							success(systemInfo) {
								if (that.isClick == false) {
									return;
								}
								uni.showLoading();
								that.isClick = false;
								that.$api('user.smslogin', {
									mobile: Number(that.form.mobile),
									code: Number(that.form.code),
									event: 'register',
									push_clientid: res.cid,
									mobile_message_json: JSON.stringify(systemInfo)
								}).then(res => {
									console.log(res)
									that.isClick = true;
									if (res.code === 1) {
										uni.setStorageSync('token', res.data.token)
										that.getUserInfo(res.data.token).then(() => {
											//#ifdef APP-PLUS
											getApp().globalData.initFun()
											// #endif
											//#ifdef H5
											getApp().globalData.islogout = false;
											// #endif
											that.$store.commit("setIslogout", false);
											uni.hideLoading();
											getApp().globalData.getHistoryCronyList();

											//统计
											uni.getPushClientId({
												success(res) {
													console.log(res.cid)
													that.$api('stat.init', {
														"push_clientid": res
															.cid
													}).then(res => {})
												}
											})
											that.$nextTick(() => {
												if (res.msg == "注册成功") {
													uni.reLaunch({
														url: '/pages/auth/s1'
													});
												} else if (res.msg == "登录成功") {
													uni.reLaunch({
														url: '/pages/index/index'
													});
												}
											})
										})
									} else {
										that.$u.toast(res.msg)
									}
								})
							}
						})
					}
				})
				// #endif
				// #ifdef H5
				let data = {
					mobile: Number(that.form.mobile),
					code: Number(that.form.code),
					event: 'register',
					push_clientid: '',
					mobile_message_json: ""
				}
				if (that.isClick == false) {
					return;
				}
				uni.showLoading();
				that.isClick = false;
				that.$api('user.smslogin', data).then(res => {
					that.isClick = true;
					if (res.code === 1) {
						uni.setStorageSync('token', res.data.token)
						that.getUserInfo(res.data.token).then(() => {
							//#ifdef APP-PLUS
							getApp().globalData.initFun()
							// #endif
							//#ifdef H5
							getApp().globalData.islogout = false;
							// #endif
							that.$store.commit("setIslogout", false);
							uni.hideLoading();
							getApp().globalData.getHistoryCronyList();

							//统计
							uni.getPushClientId({
								success(res) {
									console.log(res.cid)
									that.$api('stat.init', {
										"push_clientid": res.cid
									}).then(res => {})
								}
							})
							that.$nextTick(() => {
								if (!that.userInfo.realname && !that.userInfo
									.dynasty && that
									.userInfo
									.gender == 0) {
									uni.reLaunch({
										url: '/pages/auth/s1'
									});
								} else if (that.userInfo.gender != 0) {
									if (that.userInfo.realname != '' && that
										.userInfo.dynasty !=
										'') {
										uni.reLaunch({
											url: '/pages/index/index'
										});
									} else {
										console.log('不知道是否有免费次数');
									}

								} else {
									console.log('ok')
									that.$u.route('/pages/auth/login')
								}
								if (!that.userInfo.role_id) {
									uni.reLaunch({
										url: '/pages/auth/s1'
									});
								}
								if (that.userInfo.gender == 0) {
									uni.reLaunch({
										url: '/pages/auth/s1'
									});
								}
								if (that.userInfo.realname != '' && that.userInfo
									.dynasty != '' &&
									that
									.userInfo.gender !=
									0) {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								} else {
									console.log('ok')
									uni.reLaunch({
										url: '/pages/auth/s1'
									});
								}

							})

						})
					} else {
						that.$u.toast(res.msg)
					}
				})
				// #endif

			},
		}
	}
</script>
<style lang="scss" scoped>
	.logo {
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.logoPic {
			width: 208rpx;
			height: 208rpx;
		}
	}

	.sendCodeBtn {
		width: 175rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background: #FE4373;
		color: #fff;
		font-size: 24rpx;

		&[disabled] {
			background: #CCCCCC;
			border: none !important;
			color: #fff;
		}
	}
</style>